import { FC } from "react";
import { OptimizationSuggestion } from "../../types";
import SectionHeader from "../SectionHeader";
import styles from "./index.module.less";

interface OptimizationSuggestionsProps {
  buttonText?: string;
  suggestions: OptimizationSuggestion[];
  onActionClick?: (name: any,itemName:string) => void;
  isLoading?: boolean;
}

const OptimizationSuggestions: FC<OptimizationSuggestionsProps> = ({
  suggestions,
  onActionClick = () => {},
  isLoading = false,
}) => {
  const handleActionClick = (name: any,itemName:string) => {
    onActionClick(name,itemName);
  };

  return (
    <div
      className={`${styles["optimization-section"]} ${isLoading ? styles["loading"] : ""}`}
    >
      <SectionHeader title="优化建议" />
      <div className={styles["optimization-list"]}>
        {suggestions.map((suggestion) => (
          <div
            key={suggestion.id}
            className={`${styles["optimization-item"]} ${isLoading ? styles["loading-item"] : ""}`}
          >
            <div className={styles["suggestion-content"]}>
              {isLoading ? (
                <div className={styles["loading-text"]}>加载中...</div>
              ) : (
                <>
                  <span>{suggestion.content}</span>
                </>
              )}
            </div>
            <div className={styles["suggestion-action"]}>
              <span
                className={`${styles["action-button"]} ${isLoading ? styles["disabled"] : ""}`}
                onClick={() =>
                  !isLoading && handleActionClick(suggestion.buttonText,suggestion.content)
                }
              >
                {suggestion.buttonText}{" "}
                <span className={styles.icon}>&gt;</span>
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default OptimizationSuggestions;
